<template>
  <view class="container">
    <!-- 背景图片 -->
    <div class="home-img"></div>
    <div class="home-handle"></div>
    <div class="home-desc"></div>
    <!-- <image class="home-img" src="@/static/images/home_bg.png" mode="aspectFill" />
    <image class="home-handle" src="@/static/images/video_handle.png" mode="widthFix" />
    <image class="home-desc" src="@/static/images/video_desc.png" mode="widthFix" /> -->
    
    <!-- 头像，点击可播放 -->
    <!-- <image 
      class="avatar" 
      :class="{ 'rotate': isRotating }"
      :mode="scaleToFill"
      @tap="playOnce" 
      src="@/static/images/avatar.png"
    /> -->
    <div class="avatar" :class="{ 'rotate': isRotating }" @tap="playOnce" ></div>
    
    <!-- 音乐动画组件 -->
    <lineAnimate ref="lineAnimateRef" class="home-music" :playing="isPlaying" :count="46" />
    
    <!-- 内容图片 -->
    <!-- <image class="home-content" src="@/static/images/video_content.png" mode="widthFix" /> -->
    <div class="home-content"></div>
    
    <!-- 文字动画组件 -->
    <textAnimate ref="textAnimateRef" />
    
    <!-- Logo -->
    <!-- <image class="logo" src="@/static/images/logo.png" mode="widthFix" /> -->
     <div class="logo"></div>
  </view>
</template>

<script>
import lineAnimate from '../../components/lineAnimate'
import textAnimate from '../../components/textAnimate'
export default {
  components: {
    lineAnimate,
    textAnimate
  },
  data() {
    return {
      isPlaying: false,
      isRotating: false,
    }
  },
  
  mounted() {
    // 使用全局音频管理器
    this.initAudio();

    const pages = getCurrentPages()
    if (pages.length === 1) {
      this.isPlaying = false;
      this.isRotating = false;
      return;
    }
    
    // 如果是从其他页面跳转过来的，检查音频播放状态
    this.checkAudioState();
  },
  
  onHide() {
    // this.isPlaying = false;
    // this.isRotating = false;
  },
  
  onUnload() {
    // 页面卸载时不销毁音频，保持全局播放
    // 音频资源由全局管理器统一管理
  },
  
  methods: {
    /**
     * 初始化音频（使用全局音频管理器）
     */
    initAudio() {
      console.log('initAudio', this.$audioManager);
      if (!this.$audioManager) {
        console.error('音频管理器未初始化');
        return;
      }

      // 初始化全局音频管理器
      this.$audioManager.init();

      // 设置回调函数
      this.$audioManager.setCallbacks({
        onPlay: () => {
          console.log('----------------');
          this.isPlaying = true;
          this.isRotating = true;
          // 触发文字动画
          this.$refs.textAnimateRef && this.$refs.textAnimateRef.simulateAudioPlayback();
        },
        onEnd: () => {
          this.isPlaying = false;
          this.$refs.textAnimateRef?.handleReset();
          // setTimeout(() => (this.isRotating = false), 1000);
        },
        onPause: () => {
          this.isPlaying = false;
          this.isRotating = false;
        }
      });
    },

    /**
     * 检查音频播放状态
     */
    checkAudioState() {
      if (!this.$audioManager) {
        return;
      }

      const state = this.$audioManager.getPlayingState();
      if (state.isPlaying || state.mainPlaying) {
        this.isPlaying = true;
        this.isRotating = true;
        // 如果已经在播放，触发文字动画
        this.$refs.textAnimateRef && this.$refs.textAnimateRef.simulateAudioPlayback();
      }
    },
    
    /**
     * 点击播放/暂停
     */
    playOnce() {
      if (!this.$audioManager) {
        return;
      }

      if (!this.isPlaying && !this.isRotating) {
        // 使用全局音频管理器播放
        this.$audioManager.play();
        
        // 状态会在回调中更新
      } else {
        // 这里可以添加暂停逻辑
        // this.$audioManager.pause();
        // this.isPlaying = false;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  min-height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  padding-top: 180rpx;
}

.home-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  background-image: url('../../static/images/home_bg.png');
  background-size: 100% 100%;
}

.avatar {
  display: block;
  width: 528rpx;
  height: 528rpx;
  position: relative;
  z-index: 1;
  // margin-top: 278rpx;
  background-image: url('../../static/images/avatar.png');
  background-size: 100% 100%;
}

.home-handle {
  width: 312rpx;
  height: 356rpx;
  position: absolute;
  left: 0;
  top: 30rpx;
  z-index: 2;
  background-image: url('../../static/images/video_handle.png');
  background-size: 100% 100%;
}

.home-desc {
  width: 218rpx;
  height: 240rpx;
  position: absolute;
  right: 50rpx;
  top: 30rpx;
  z-index: 2;
  background-image: url('../../static/images/video_desc.png');
  background-size: 100% 100%;
}

.home-music {
  display: block;
  position: relative;
  z-index: 1;
  margin: 50rpx 0;
}

.home-content {
  display: block;
  width: 390rpx;
  height: 26rpx;
  position: relative;
  z-index: 1;
  background-image: url('../../static/images/video_content.png');
  background-size: 100% 100%;
}

.logo {
  display: block;
  width: 52rpx;
  height: 132rpx;
  position: relative;
  z-index: 2;
  margin-bottom: 50rpx;
  box-sizing: border-box;
  background-image: ur;
  background-image: url('../../static/images/logo.png');
  background-size: 100% 100%;
}

.rotate {
  animation: spin 15s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>